<style scoped="scoped">
</style>
<template>
  <div>
    <el-dialog
      title="打印"
      width="900px"
      :visible.sync="showModal"
      center
    >
      <div class="pick-list-content-box">
        <div class="pick-list-content" style="width: 750px;margin:0 auto;">
          <div class="pick-content-title"
               style="width: 100%;height: 50px;text-align: center;font-size: 18px;font-weight: 600;line-height: 49px;">
            <span>移库单</span>
          </div>
          <div class="pick-content-service">
            <table class="content-service" style="width: 100%;">
              <tr>
                <td width="30%">创建人:  <span> {{printHeader.founderName}}</span></td>
                <td width="60%"> 创建时间: <span>{{printHeader.foundtime | unixTimestampFilter}}</span></td>
                <td width="10%"> </td>
              </tr>
            </table>
            <table style="width:100%; border-collapse: collapse;">
              <thead>
              <tr style="line-height: 25px;">
                <!--<th width="25px">#</th>-->
                <th width="70px">商家名称</th>
                <th width="40px">包件数量</th>
                <th width="110px">包件名</th>
                <th width="90px">包件编号</th>
                <th width="140px">所属产品</th>
                <th width="70px" style="text-align: center"><span>产品编号</span></th>
                <th width="110px">现有库位</th>
                <th width="110px">目标库位</th>
              </tr>
              </thead>
              <tbody v-for="(item, index) in printList" :key="index">
              <tr>
                <!--<td>{{index + 1}}</td>-->
                <!--服务单号-->
                <td  style="word-break: break-all;">
                  {{item.cargoOwnerName}}
                </td>
                <td>
                  {{item.locationMoveNum}}
                </td>
                <td>
                  {{item.packageName}}
                </td>
                <td style="word-break: break-all;">
                  {{item.packageCode}}
                </td>
                <td>
                  {{item.productName}}
                </td>
                <td style="word-break: break-all;">
                  {{item.productNo}}
                </td>
                <td>
                  {{item.formLocationAddress}}
                </td>
                <td>
                  {{item.toLocationAddress}}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {getUserInfo} from '@/utils/auth.js'
let LODOP = null
export default {
  name: 'PrintModal',
  props: {
    printHeader: {
      type: Object,
      required: true
    },
    printList: {
      type: Array,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      user: getUserInfo('name'),
      detail: {},
      showModal: false,
      thStyle1: 'text-align: center;border: 1px solid #666;width:100px',
      thStyle2: 'text-align: center;border: 1px solid #666;padding: 1px 1px;',
      thStyle3: 'text-align: center;border: 1px solid #666;padding: 1px 1px;width:140px;word-break: break-all;'
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  mounted() {
    this.setStyle()
  },
  methods: {
    // 单条打印 或多条批量打印
    show() {
      this.showModal = true
      this.setStyle()
      this.$nextTick(_ => {
        // this.getDetail()
      })
    },
    hide() {
      this.showModal = false
    },
    print() {
      this.setStyle()
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.pick-list-content-box').each((index, v) => {
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          // 增加超文本项（纸张内容的上边距, 左距, 打印区域的宽度,  高, strHtml)
          LODOP.ADD_PRINT_HTM('1mm', '1mm', '218mm', '260mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          // LODOP.SET_PRINT_STYLEA('PRINT_INIT', 'Left', '5mm')
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
        // this.labelRecord()
      }
    },
    setStyle() {
      this.$nextTick(_ => {
        setTimeout(_ => {
          $(this.$el).find('.pick-content-table').each((index, v) => {
            v.setAttribute('style', 'width: 100%;border-collapse:collapse;')
            $(v).find('th').each((index2, v2) => {
              v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
            })
            $(v).find('td').each((index2, v2) => {
              v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
            })
          })
        }, 500)
      })
    }
    // 记录打印次数
    // labelRecord () {
    //   httpSuccessPost('/ms-warehouse-order/loading-order/print-list', this.idArr).then(response => {
    //     this.$emit('refresh')
    //     console.log('response', response)
    //   })
    // }
  }
}
</script>
